<template>
  <el-dialog
    title="新增角色"
    :visible.sync="visible"
    width="35%"
    :close-on-click-modal="false"
    top="2vh"
    :show-close="false"
    center
  >
    <el-form :model="inputRule" label-width="80px" :rules="rules" ref="ruleForm" :inline="true">
      <el-form-item label="角色编码" prop="roleCode">
        <el-input v-model="inputRule.roleCode" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="inputRule.roleName" class="input_width"></el-input>
      </el-form-item>
      <el-form-item label="生效日期" prop="roleCreateTime">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="inputRule.roleCreateTime"
          style="width: 130%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="失效日期" prop="roleInvalidTime">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="inputRule.roleInvalidTime"
          style="width: 130%;"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="roleStatus">
        <el-radio-group v-model="inputRule.roleStatus">
          <el-radio label="有效" border>有效</el-radio>
          <el-radio label="无效" border>无效</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="roleRemarks">
        <el-input type="textarea" v-model="inputRule.roleRemarks" :rows="4" style="width: 160%;"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancle()">取 消</el-button>
      <el-button type="primary" @click="addForm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Message } from "element-ui";
export default {
  components: {},
  data() {
    return {
      inputRule: {},
      visible: true,
      rules: {
        roleCode: [
          { required: true, message: "请输入角色编码", trigger: "blur" },
          { min: 8, max: 20, message: "长度在 8 到 20 个字符" },
        ],
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符" },
        ],
      },
    };
  },
  methods: {
    cancle() {
      this.$emit("closeDialog", false);
    },
    addForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = new URLSearchParams();
          param.append("roleCode", this.inputRule.roleCode);
          param.append("roleName", this.inputRule.roleName);
          param.append(
            "roleCreateTime",
            new Date(this.inputRule.roleCreateTime)
          );
          param.append(
            "roleInvalidTime",
            new Date(this.inputRule.roleInvalidTime)
          );
          param.append(
            "roleStatus",
            this.inputRule.roleStatus == "有效" ? 1 : 0
          );
          param.append("roleRemarks", this.inputRule.roleRemarks);
          const vm = this;
          vm.$http({
            method: "post",
            url: "/role/insertRole",
            data: param,
          }).then((res) => {
            console.log(res);
            vm.$emit("closeDialog", false);
            if (res.data == 1) {
              Message({ message: "添加成功", type: "success" });
              vm.$emit("refreshRoleList");
            } else {
              Message({ message: "添加失败", type: "error" });
            }
          });
        } else {
           Message({ message: "添加失败，格式验证错误", type: "error" });
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.input_width {
  width: 300px;
}
.date_picker {
  width: 300px;
}
</style>